<template>
  <ElConfigProvider :locale="zhCn">
    <ElForm ref="form" class="dialog-form" label-width="auto" :model="props.data">

      <ElScrollbar class="dialog-form-body" max-height="65vh" v-loading="loading">
        <slot :data="props.data" />
      </ElScrollbar>

      <div class="dialog-form-footer">
        <ElButton :loading="loading" type="primary" style="width: 104px;" @click="submit">保存</ElButton>
        <ElButton style="width: 82px;" @click="cancel">取消</ElButton>
      </div>
    </ElForm>
  </ElConfigProvider>
</template>

<script lang="ts">
import { ElLoadingDirective } from 'element-plus'
export default {
  directives: {
    loading: ElLoadingDirective
  }
}
</script>

<script setup lang="ts">
import { ref, onMounted, nextTick } from 'vue'
import { ElForm, ElScrollbar, ElButton, ElConfigProvider, ElMessageBox } from 'element-plus';
import zhCn from 'element-plus/es/locale/lang/zh-cn'

interface Props {
  row?: object;
  data: object;
  getApi?: (id: any, row: any) => Promise<any>;
  postApi?: (data: any) => Promise<any>;
  getDefaultData?: (id: any, row: any) => any;
}
const props = withDefaults(defineProps<Props>(), {
  row: () => ({}),
  data: () => ({}),
  getApi: () => Promise.resolve({}),
  postApi: () => Promise.resolve(null),
})

interface Emits {
  resolve: [data?: any],
  reject: []
}
const emit = defineEmits<Readonly<Emits>>()
const loading = ref(false)
const form = ref()

if (props.getDefaultData) {
  Object.assign(props.data, props.getDefaultData((props.row as any).id, props.row))
}

const getData = async () => {
  loading.value = true
  props.getApi((props.row as any).id, props.row).then((res) => {
    Object.assign(props.data, res)
  }).finally(() => {
    loading.value = false
  })
}

/**
 * sub_noSubmit = true 直接拦截
 * sub_intercept = true 弹出提醒框 +  sub_msg = '消息' 弹出确定取消框
 * 
 */
const submit = async () => {

  if ('checkFunc' in props.data) {
    let checkFunc = props.data.checkFunc;
    let data = await checkFunc(props.data);
    console.log(data);
    // 直接拦截
    if (data.sub_noSubmit === true) {
      return false;
    } else if (data.sub_intercept === true) {
      await ElMessageBox.confirm(data.sub_msg, '提示');
    }
  }

  await form.value?.validate() || Promise.reject()
  loading.value = true
  props.postApi(props.data).then((res) => {
    if (res) {
      // 循环res里的属性,并把值附加给props.data
      for (const key in res) {
        if (Object.prototype.hasOwnProperty.call(res, key)) {
          props.data[key] = res[key]
        }
      }
    }
    emit('resolve', props.data)
  }).finally(() => {
    loading.value = false
  })
}

const cancel = () => {
  emit('reject')
}

onMounted(() => {
  getData()
})

defineExpose({
  data: props.data,
  submit,
  cancel
})
</script>

<style scoped lang="scss">
.dialog-form {
  &-body {
    padding: 0 16px;
  }

  &-footer {
    position: relative;
    height: 64px;
    background: #FFFFFF;
    box-shadow: 0 -5px 11px 0 #99999921;
    border-radius: 0 0 4px 4px;
    display: flex;
    align-items: center;
    padding: 0 34px;
  }

  :deep(.el-date-editor) {
    width: 100%;
  }

  :deep(.el-input-number) {
    width: 100%;
  }

  :deep(.el-input-number .el-input__inner) {
    text-align: left;
  }
}
</style>
